<template>
  <div class="pc-chain flex-between">
    <div class="col-box first-col flex-between-stright">
      <div class="item-box flex-left">
        <i class="iconfont iconBTY"></i>
        <div class="txt">
          <p class="txt-title">BTY当前价格</p>
          <p>${{btyInfo.usd}} / ￥{{btyInfo.rmb}}</p>
        </div>
      </div>
      <div class="item-box flex-left">
        <i class="iconfont iconpingjunchukuai"></i>
        <div class="txt">
          <p>
            <span class="txt-title" style="display:inline-block;width:85px">平均出块时间</span>
            {{btyInfo.perTime>0? btyInfo.perTime.toFixed(2):5.01}} s
          </p>
          <p>
            <span class="txt-title" style="display:inline-block;width:85px">每秒交易数</span>
            {{(btyInfo.perTxCount||0.81).toFixed(2)}}
          </p>
        </div>
      </div>
    </div>
    <div class="col-box second-col flex-between-stright">
      <div class="item-box flex-left">
        <i class="iconfont icondangqianzongliang"></i>
        <div class="txt">
          <p>
            <span class="txt-title" style="display:inline-block;width:70px">当前总量</span>
            {{parseInt(btyInfo.totalSum)|filterNum}} BTY
          </p>
          <p>
            <span class="txt-title" style="display:inline-block;width:70px">当前总市值</span>
            ¥ {{parseInt(btyInfo.totalSum*btyInfo.rmb)|filterNum}}
          </p>
        </div>
      </div>
      <div class="item-box flex-left">
        <i class="iconfont iconjiaoyibishu"></i>
        <div class="txt">
          <p class="txt-title">交易笔数</p>
          <p>{{parseInt(btyInfo.txCount)|filterNum}} 笔</p>
        </div>
      </div>
    </div>
    <div class="col-box third-col">
      <kline></kline>
    </div>
  </div>
</template>
<script>
import Kline from "./Kline";
import chainBase from "@/mixins/Home/chainInfo.js";
export default {
  mixins: [chainBase],
  components: {
    Kline
  }
};
</script>

<style lang="scss" scoped>
.pc-chain {
  z-index: 200;
  position: absolute;
  width: 1200px;
  height: 207px;
  bottom: -75px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0px 2px 4px 0px rgba(210, 210, 210, 0.24);
  border-radius: 2px;
  .col-box {
    height: 187px;
    .item-box {
      width: 317px;
      height: 88px;
      background: $white;
      padding: 15px 0 15px 20px;
      font-size: 14px;
      .iconfont {
        margin-right: 20px;
        color: #6368de;
        font-size: 38px;
      }
      .txt {
        color: $black;
        p:last-child {
          margin-top: 10px;
        }
        .txt-title {
          margin-right: 10px;
          color: $font_grey;
        }
      }
    }
  }
  .first-col,
  .second-col {
    width: 317px;
  }
}
</style>

